<script>
import { getManagerListAPI, getDepartmentListAPI, addDepartmentAPI, findDepartmentAPI, updateDepartmentAPI } from '@/api/departmentApi'

export default {
  name: 'Dialog',
  props: {
    /* disable父组件传递过来的布尔值用于控制是否显示el-dialog组件 */
    disable: {
      type: Boolean,
      default: false
    },
    /* dialogTitle父组件传递过来的字符串值用于控制el-dialog组件的标题 */
    dialogTitle: {
      type: String,
      default: '添加部门'
    },
    /* 部门列表(平铺的) */
    originDepts: {
      type: Array,
      default: () => ([])
    },
    /* 父级部门的ID */
    pid: {
      type: Number,
      default: 0
    }
  },
  data() {
    /* 验证部门编码的自定义校验函数 */
    const validateCode = async(rule, value, callback) => {
      /*
      const { data } = await getDepartmentListAPI()
      const isExist = data.some(item => item.code === value)
      const isExist = this.originDepts.some(item => item.code === value)
      */
      // 判断是否是编辑状态如果是编辑状态排除自身
      let isExist = this.dialogTitle === '编辑部门' ? this.originDepts.filter(item => item.id !== this.pid).some(item => item.code === value) : this.originDepts.some(item => item.code === value)
      if (isExist) return callback(new Error('部门编码已经存在'))
      callback()
    }
    /* 验证部门名称的自定义校验函数 */
    const validateName = async(rule, value, callback) => {
      /*
       const { data } = await getDepartmentListAPI()
       const isExist = data.some(item => item.name === value)
       const isExist = this.originDepts.some(item => item.name === value)
       */
      // 判断是否是编辑状态如果是编辑状态排除自身
      let isExist = this.dialogTitle === '编辑部门' ? this.originDepts.filter(item => item.id !== this.pid).some(item => item.name === value) : this.originDepts.some(item => item.name === value)
      if (isExist) return callback(new Error('部门名称已经存在'))
      callback()
    }
    return {
      /* 部门负责人列表 */
      managerList: [],
      /* 表单数据对象 */
      formData: {
        // 部门编码
        code: '',
        // 部门介绍
        introduce: '',
        // 部门负责人名字
        managerId: '',
        // 部门名称
        name: '',
        // 父级部门id
        pid: ''
      },
      /* 表单规则对象 */
      formRules: {
        code: [
          { required: true, trigger: 'blur', message: '请输入部门编码' },
          { max: 10, min: 2, trigger: 'blur', message: '部门编码长度为2-10个字符' },
          { validator: validateCode, trigger: 'blur' }
        ],
        introduce: [
          { required: true, trigger: 'blur', message: '请输入部门介绍' },
          { max: 100, min: 2, trigger: 'blur', message: '部门介绍长度为2-100个字符' }
        ],
        managerId: [
          { required: true, trigger: 'change', message: '请选择部门负责人' }
        ],
        name: [
          { required: true, trigger: 'blur', message: '请输入部门名称' },
          { max: 10, min: 2, trigger: 'blur', message: '部门名称长度为2-10个字符' },
          { validator: validateName, trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    /* 获取部门负责人的请求函数 */
    async fetchDepartmentManager() {
      // 调用getManagerListAPI()接口函数用于获取部门的负责人
      const { data } = await getManagerListAPI()
      // 赋值
      this.managerList = data
    },
    /* 发送添加部门的请求函数 */
    async sendAsyncAddDepartmen() {
      try {
        // 整理需要带给服务器的参数
        const params = { ...this.formData, pid: this.pid }
        // 调用addDepartmentAPI(params)新增部门的接口传入参数，返回的是一个Promise对象
        const { message } = await addDepartmentAPI(params)
        // 提示用户新增部门成功
        this.$message.success(message)
        // 触发handleSuccess自定义事件通知父组件新增部门成功(父组件关闭弹层重新发送获取部门列表的请求)
        this.$emit('handleSuccess')
      } catch (e) {
        // 部门新增失败
        this.$message.error(e.message)
      }
    },
    /* 发送编辑部门的请求函数 */
    async sendAsyncEditDepartmen() {
      try {
        // 调用updateDepartmentAPI()接口函数传入当前部门的id和当前部门的详情数据
        const { message } = await updateDepartmentAPI(this.pid, this.formData)
        // 提示用户修改成功
        this.$message.success(message)
        // 触发handleSuccess自定义事件通知父组件修改部门成功(父组件关闭弹层重新发送获取部门列表的请求)
        this.$emit('handleSuccess')
      } catch (e) {
        // 提示用户修改部门失败
        this.$message.error(e.message)
      }
    },
    // 根据点击的ID发送请求获取当前的部门详情
    async findDepartment(id) {
      try {
        const { data } = await findDepartmentAPI(id)
        this.formData = data
      } catch (e) {
        this.$message.error(e.message)
      }
    },
    /* 清空表单字段数据和校验信息的回调函数 */
    resetForm() {
      this.$nextTick(() => {
        this.$refs.elForm.resetFields()
      })
    },
    /* el-dialog组件关闭的回调函数 */
    handleClose() {
      // 向父组件组件触发一个'update:disable'自定义事件，传递一个值为false修改父组件的disable(用于隐藏弹框)
      this.$emit('update:disable', false)
    },
    /* 点击取消按钮的回调函数 */
    handleCancel() {
      this.handleClose()
    },
    /* 点击确定按钮的回调函数(发送添加部门或者是修改部门的请求) */
    async handleSubmit() {
      // 对整个表单进行校验的方法，参数为一个回调函数。该回调函数会在校验结束后被调用，并传入两个参数：是否校验成功和未通过校验的字段。若不传入回调函数，则会返回一个 promise
      const valid = await this.$refs.elForm.validate().catch(e => e)
      // 为true代表表单的兜底校验通过,false代表表单的兜底校验失败
      if (!valid) return
      switch (this.dialogTitle) {
        case '添加部门':
          // 调用添加部门的请求函数
          this.sendAsyncAddDepartmen()
          break
        default:
          // 调用编辑部门的请求函数
          this.sendAsyncEditDepartmen()
          break
      }
      /*if (this.dialogTitle === '添加部门') {
        // 调用添加部门的请求函数
        this.sendAsyncAddDepartmen()
      } else {
        // 调用编辑部门的请求函数
        this.sendAsyncEditDepartmen()
      }*/
    }

  },
  watch: {
    /* 监听disable字段的变化(在变化的时候重置表单) */
    disable(newValue, oldValue) {
      // 调用resetForm()重置表单
      this.resetForm()
    }
  },
  created() {
    //组件创建完毕的时候调用fetchDepartmentManager()获取部门负责人列表
    this.fetchDepartmentManager()
  }
}
</script>

<template>
  <el-dialog :title="dialogTitle" :visible="disable" :close-on-click-modal="false" @close="handleClose" append-to-body>
    <el-form label-width="100px" ref="elForm" :model="formData" :rules="formRules">
      <el-form-item label="部门名称" prop="name">
        <el-input placeholder="请输入部门的名称" v-model="formData.name"></el-input>
      </el-form-item>
      <el-form-item label="部门编码" prop="code">
        <el-input placeholder="请输入部门的编码" v-model="formData.code"></el-input>
      </el-form-item>
      <el-form-item label="部门负责人" prop="managerId">
        <el-select placeholder="请选择部门的负责人" v-model="formData.managerId">
          <el-option v-for="(item,index) in managerList" :value="item.id" :label="item.username" :key="item.id"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="部门介绍" prop="introduce">
        <el-input type="textarea" rows="4" resize="none" placeholder="请输入相应的部门介绍" v-model="formData.introduce"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="danger" @click="handleCancel">取消</el-button>
        <el-button type="primary" @click="handleSubmit">确定</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>
</template>

<style scoped lang="scss"></style>
